import React from 'react'
import {
  Image,
  TouchableHighlight,
  StyleSheet,
  View,
  Text,
  Platform
} from 'react-native'

import BaseComponent from '../../components/common/baseComponent'

import loadingIcon from '../../../assets/images/icon/ball.gif'

import getFullPath from '../../utils/image'

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    // position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0
  },
  img: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    top: 0,
    zIndex: 4
  },
  placeholder: {
    zIndex: 3,
    position: 'absolute',
    left: 10,
    right: 10,
    top: 10,
    bottom: 10
  },
  err: {
    zIndex: 3,
    position: 'absolute',
    color: 'blue',
    fontSize: 20,
    fontFamily: 'iconfont',
    textAlign: 'center',
    left: 0,
    right: 0
  },
  loading: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center'
  },
  icon: {
    width: 30,
    height: 30
  }
})

class RzImage extends BaseComponent {
  constructor (props) {
    super(props)
    this.displayName = 'XeImage'
    this.state = {
      loaded: false,
      error: false
    }
    this.loadDone = this.loadDone.bind(this)
    this.error = this.error.bind(this)
    this.getRealPath = this.getRealPath.bind(this)
    this.getRealPath(props)
  }

  componentWillReceiveProps (nextProps) {
    if (nextProps.source.uri !== this.props.source.uri) {
      this.getRealPath(nextProps)
      this.setState({
        loaded: false,
        error: false
      })
    }
  }

  getRealPath (props) {
    const {
      source,
      size,
      prefix
    } = props

    if (source.uri) {
      this.realSource = {
        uri: getFullPath({
          path: source.uri,
          size,
          prefix
        })
      }
    } else {
      this.realSource = source
    }
  }

  loadDone () {
    this.setState({
      loaded: true
    })
  }

  error (e) {
    console.log('load pic error', this.realSource, e)
    this.setState({
      error: true,
      loaded: false
    })
  }

  render () {
    const {
      clickFunc,
      style,
      ...others
    } = this.props

    const {
      loaded,
      error
    } = this.state

    return (
      <View
        style={[
          styles.container,
          style
        ]}
      >
        {(() => {
          if (!error) {
            return (
              <TouchableHighlight
                onPress={clickFunc}
                style={[
                  styles.container,
                  style
                ]}
              >
                <Image
                  {...others}
                  style={[
                    styles.img,
                    {
                      opacity: loaded ? 1 : 0
                    }
                  ]}
                  source={this.realSource}
                  onLoad={this.loadDone}
                  onError={this.error}
                />
              </TouchableHighlight>
            )
          }
        })()}
        {(() => {
          if (error || !loaded) {
            let view
            if (!error && Platform.OS === 'ios') {
              view = (
                <View style={styles.loading}>
                  <Image
                    source={loadingIcon}
                    style={styles.icon}
                  />
                </View>
              )
            } else if (error) {
              view = (
                <Text
                  style={[
                    styles.err
                  ]}
                >
                &#xe664;
                </Text>
              )
            }
            return view
          }
        })()}
      </View>
    )
  }
}

RzImage.propTypes = {
  ...Image.propTypes,
  clickFunc: React.PropTypes.func,
  size: React.PropTypes.string,
  prefix: React.PropTypes.string
}

RzImage.defaultProps = {
  size: '430x430',
  prefix: 'product'
}

export default RzImage
